<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
  <title>个人信息</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
  <style>
    :root {
      --primary-color: #4CAF50;
      --card-shadow: 0 4px 8px rgba(0,0,0,0.05);
      --hover-color: rgba(76, 175, 80, 0.1);
    }

    body {
      background-color: #f5f7fa;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      margin: 0;
      padding: 0;
    }

    .sidebar {
      background-color: white;
      height: 100vh;
      box-shadow: 2px 0 10px rgba(0,0,0,0.05);
      position: fixed;
      z-index: 100;
      width: 250px;
    }

    .sidebar .nav-link {
      color: #495057;
      border-radius: 5px;
      margin-bottom: 5px;
      padding: 10px 15px;
    }

    .sidebar .nav-link:hover, .sidebar .nav-link.active {
      background-color: var(--hover-color);
      color: var(--primary-color);
    }

    .sidebar .nav-link i {
      margin-right: 10px;
      width: 20px;
      text-align: center;
    }

    .main-content {
      margin-left: 250px;
      padding: 30px;
      min-height: 100vh;
    }

    .page-header {
      background-color: white;
      padding: 20px 25px;
      border-radius: 10px;
      box-shadow: var(--card-shadow);
      margin-bottom: 25px;
    }

    .profile-container {
      background-color: white;
      border-radius: 10px;
      box-shadow: var(--card-shadow);
      padding: 30px;
    }

    .profile-header {
      display: flex;
      align-items: center;
      margin-bottom: 30px;
      padding-bottom: 20px;
      border-bottom: 1px solid #e9ecef;
    }

    .profile-avatar {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background-color: #e9f5eb;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 25px;
      color: var(--primary-color);
      font-size: 3rem;
    }

    .profile-info h2 {
      margin-bottom: 5px;
      color: #343a40;
    }

    .profile-info p {
      color: #6c757d;
      margin-bottom: 8px;
    }

    .profile-badge {
      background-color: #e9f5eb;
      color: var(--primary-color);
      padding: 3px 12px;
      border-radius: 15px;
      font-size: 0.9rem;
      display: inline-block;
    }

    .form-card {
      background-color: #f8f9fa;
      border-radius: 8px;
      padding: 25px;
      margin-bottom: 25px;
    }

    .form-title {
      font-size: 1.25rem;
      font-weight: 600;
      margin-bottom: 20px;
      color: #343a40;
      display: flex;
      align-items: center;
    }

    .form-title i {
      margin-right: 10px;
      color: var(--primary-color);
    }

    .form-group {
      margin-bottom: 20px;
    }

    .form-label {
      font-weight: 600;
      margin-bottom: 8px;
      color: #495057;
      display: flex;
      align-items: center;
    }

    .form-label i {
      margin-right: 8px;
      color: #6c757d;
      width: 20px;
      text-align: center;
    }

    .form-control-custom {
      border: 1px solid #dee2e6;
      border-radius: 6px;
      padding: 10px 15px;
      width: 100%;
      transition: border-color 0.3s;
    }

    .form-control-custom:focus {
      border-color: var(--primary-color);
      box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, 0.25);
      outline: none;
    }

    .btn-save {
      background-color: var(--primary-color);
      color: white;
      border: none;
      border-radius: 6px;
      padding: 10px 25px;
      font-weight: 600;
      transition: background-color 0.3s;
    }

    .btn-save:hover {
      background-color: #3d8b40;
    }

    .notification-badge {
      position: absolute;
      top: -5px;
      right: -5px;
      background-color: #dc3545;
      color: white;
      border-radius: 50%;
      width: 22px;
      height: 22px;
      font-size: 0.8rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .admin-info {
      padding: 30px 20px 20px;
      text-align: center;
      border-bottom: 1px solid #e9ecef;
    }

    .admin-avatar {
      width: 85px;
      height: 85px;
      border-radius: 50%;
      background-color: #e9f5eb;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 15px;
      color: var(--primary-color);
      font-size: 2.5rem;
    }

    .admin-name {
      font-weight: 600;
      margin-bottom: 5px;
      font-size: 1.2rem;
    }

    .admin-role {
      color: #6c757d;
      font-size: 0.95rem;
      background-color: #e9f5eb;
      padding: 3px 10px;
      border-radius: 15px;
      display: inline-block;
      margin-top: 10px;
    }

    .alert-message {
      padding: 15px;
      border-radius: 8px;
      margin-bottom: 25px;
      display: flex;
      align-items: center;
    }

    .alert-success {
      background-color: rgba(40, 167, 69, 0.15);
      color: #28a745;
    }

    .alert-error {
      background-color: rgba(220, 53, 69, 0.15);
      color: #dc3545;
    }

    .alert-message i {
      margin-right: 10px;
      font-size: 1.2rem;
    }
  </style>
</head>
<body>
<div class="sidebar">
  <div class="admin-info">
    <div class="admin-avatar">
      <i class="bi bi-person-badge"></i>
    </div>
    <div class="admin-name">${user.username}</div>
    <div class="admin-role">系统管理员</div>
  </div>

  <nav class="nav flex-column mt-4 px-2">
    <a class="nav-link" href="../adminHome.jsp">
      <i class="bi bi-speedometer2"></i> 控制面板
    </a>
    <a class="nav-link" href="members">
      <i class="bi bi-people"></i> 会员管理
    </a>
    <a class="nav-link" href="houses">
      <i class="bi bi-house-door"></i> 房屋管理
    </a>
    <a class="nav-link" href="venues">
      <i class="bi bi-building"></i> 场馆管理
    </a>
    <a class="nav-link" href="users">
      <i class="bi bi-person-gear"></i> 用户管理
    </a>
    <a class="nav-link active" href="profile">
      <i class="bi bi-person-circle"></i> 个人设置
    </a>
    <a class="nav-link" href="logout" style="margin-top: 20px;">
      <i class="bi bi-box-arrow-right"></i> 退出系统
    </a>
  </nav>
</div>

<div class="main-content">
  <div class="page-header">
    <div class="d-flex justify-content-between align-items-center">
      <div>
        <h2>个人信息设置</h2>
        <p class="text-muted mb-0">管理您的个人账户信息</p>
      </div>
      <div class="d-flex">
        <div class="position-relative me-3">
          <a href="#" class="btn btn-outline-secondary position-relative">
            <i class="bi bi-bell"></i>

          </a>
        </div>
        <div class="dropdown">
          <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
            <i class="bi bi-gear"></i>
          </button>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="profile">个人设置</a></li>
            <li><a class="dropdown-item" href="#">系统设置</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="logout">退出系统</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <div class="profile-container">
    <% if (request.getAttribute("success") != null) { %>
    <div class="alert-message alert-success">
      <i class="bi bi-check-circle"></i> <%= request.getAttribute("success") %>
    </div>
    <% } %>
    <% if (request.getAttribute("error") != null) { %>
    <div class="alert-message alert-error">
      <i class="bi bi-exclamation-circle"></i> <%= request.getAttribute("error") %>
    </div>
    <% } %>

    <div class="profile-header">
      <div class="profile-avatar">
        <i class="bi bi-person-circle"></i>
      </div>
      <div class="profile-info">
        <h2>${user.username}</h2>
        <p><i class="bi bi-telephone me-2"></i> ${user.phone}</p>
        <span class="profile-badge">系统管理员</span>
      </div>
    </div>

    <div class="form-card">
      <div class="form-title">
        <i class="bi bi-person-lines-fill"></i> 基本信息
      </div>
      <form action="updateProfile" method="post">
        <div class="row">
          <div class="col-md-6">
            <div class="form-group">
              <label class="form-label" for="username">
                <i class="bi bi-person"></i> 用户名
              </label>
              <input type="text" class="form-control-custom" id="username" name="username" value="${user.username}" required>
            </div>
          </div>
          <div class="col-md-6">
            <div class="form-group">
              <label class="form-label" for="password">
                <i class="bi bi-lock"></i> 密码
              </label>
              <input type="password" class="form-control-custom" id="password" name="password" placeholder="输入新密码" required>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-md-6">
            <div class="form-group">
              <label class="form-label" for="phone">
                <i class="bi bi-telephone"></i> 联系电话
              </label>
              <input type="text" class="form-control-custom" id="phone" name="phone" value="${user.phone}" required>
            </div>
          </div>
          <div class="col-md-6">
            <div class="form-group">
              <label class="form-label" for="idCard">
                <i class="bi bi-card-text"></i> 身份证号
              </label>
              <input type="text" class="form-control-custom" id="idCard" name="idCard" value="${user.idCard}" required>
            </div>
          </div>
        </div>

        <div class="form-title mt-5">
          <i class="bi bi-person-heart"></i> 紧急联系人信息
        </div>

        <div class="row">
          <div class="col-md-6">
            <div class="form-group">
              <label class="form-label" for="contactName">
                <i class="bi bi-person-badge"></i> 联系人姓名
              </label>
              <input type="text" class="form-control-custom" id="contactName" name="contactName" value="${user.contactName}" required>
            </div>
          </div>
          <div class="col-md-6">
            <div class="form-group">
              <label class="form-label" for="contactPhone">
                <i class="bi bi-telephone-plus"></i> 联系人电话
              </label>
              <input type="text" class="form-control-custom" id="contactPhone" name="contactPhone" value="${user.contactPhone}" required>
            </div>
          </div>
        </div>

        <div class="d-flex justify-content-end mt-4">
          <button type="submit" class="btn btn-save">
            <i class="bi bi-save me-2"></i> 保存更改
          </button>
        </div>
      </form>
    </div>

    <div class="form-card">
      <div class="form-title">
        <i class="bi bi-shield-lock"></i> 账户安全
      </div>
      <div class="row">
        <div class="col-md-6">
          <div class="d-flex align-items-center p-3 border rounded">
            <div class="me-3">
              <i class="bi bi-shield-check fs-2 text-success"></i>
            </div>
            <div>
              <h5 class="mb-1">双重验证</h5>
              <p class="mb-0 text-muted">增强账户安全性</p>
            </div>
            <div class="ms-auto form-check form-switch">
              <input class="form-check-input" type="checkbox" role="switch" id="twoFactorSwitch">
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="d-flex align-items-center p-3 border rounded">
            <div class="me-3">
              <i class="bi bi-device-phone fs-2 text-primary"></i>
            </div>
            <div>
              <h5 class="mb-1">设备管理</h5>
              <p class="mb-0 text-muted">查看登录设备</p>
            </div>
            <div class="ms-auto">
              <button class="btn btn-sm btn-outline-secondary">查看</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
  // 设置当前页面的活动菜单项
  document.addEventListener('DOMContentLoaded', function() {
    // 设置个人设置菜单为激活状态
    const profileLink = document.querySelector('.nav-link[href="admin/profile"]');
    if (profileLink) {
      document.querySelectorAll('.nav-link').forEach(link => {
        link.classList.remove('active');
      });
      profileLink.classList.add('active');
    }
  });
</script>
</body>
</html>